import { _decorator, AnimationClip, Component, Animation, Event, Label, log, Node, tween, UIOpacity, UITransform, v3, Vec3, Layout } from 'cc';
import StorageManager from '../Data/StorageManager';
import { PlayerData } from '../Data/PlayerData';
import { Globals } from '../Globals';
import { ResourcesUtil } from '../ResourcesUtil';
const { ccclass, property } = _decorator;

@ccclass('RoleSelectionPanel')
export class RoleSelectionPanel extends Component {
    @property(Node) rolesNode: Node = null;

    private _isClisk = false;
    static currNum = 0; //当前位置
    protected onLoad(): void {
        // 获取当前角色
        RoleSelectionPanel.currNum = StorageManager.instance.currRole - 1; // 当前角色下标

        // 拿到角色数据，初始化
        // this.initRoles().then(() => {
        //     // 各个角色之间的偏移量(开始时，移动到_currNum的角色位置)
        //     const currChildren = this.rolesNode.children[0].getPosition();
        //     const nextChildren = this.rolesNode.children[1].getPosition();
        //     let offset = (nextChildren.x - currChildren.x) * RoleSelectionPanel.currNum;
        //     this.move(this.rolesNode.children, -offset);
        // });
        this.initRoles()
        // 首次加载这里太多会卡顿，延迟一下
        new Promise((resolve, reject) => {
            this.rolesNode.getComponent(Layout).updateLayout();
            this.scheduleOnce(() => {
                resolve('');
            }, 0.5)
        }).then(() => {
            // 各个角色之间的偏移量(开始时，移动到_currNum的角色位置)
            const currChildren = this.rolesNode.children[0].getPosition();
            const nextChildren = this.rolesNode.children[1].getPosition();
            let offset = (nextChildren.x - currChildren.x) * RoleSelectionPanel.currNum;
            this.move(this.rolesNode.children, -offset);
        })
    }
    protected onEnable(): void {
    }
    protected onDisable(): void {

    }
    start() {
    }

    update(deltaTime: number) {

    }

    /**
     * 获取选中的角色
     * @returns 返回当前选中的角色id
     */
    static getSelectRole() {
        return RoleSelectionPanel.currNum + 1;
    }

    // 初始化角色选项卡
    // initRoles(): Promise<any> {
    //     return new Promise((resolve, reject) => {
    //         // 获取角色数据
    //         const roles = PlayerData;
    //         Object.keys(roles).forEach((key, index) => {
    //             const role = roles[key]; //角色信息
    //             // 创建节点,赋值
    //             const roleCard = Globals.getNode("RoleCard", this.rolesNode); // 创建节点
    //             const roleIntroduce = roleCard.getChildByName("Introduce")
    //             roleIntroduce.getChildByName("hp").getComponent(Label).string = `生命：${role.maxHp}`; // 设置血量
    //             roleIntroduce.getChildByName("attack").getComponent(Label).string = `攻击：${role.attack}`; // 设置血量
    //             roleIntroduce.getChildByName("speed").getComponent(Label).string = `速度：${role.speed}`; // 设置血量
    //             roleIntroduce.getChildByName("attackSpeed").getComponent(Label).string = `攻速：${(1 - role.attackSpeed) * 10}`; // 设置血量
    //             roleCard.getChildByName("Name").getComponent(Label).string = role.name; // 设置名字
    //             // 设置对应的动画
    //             const animationPath = `Player/role${key}/`;
    //             ResourcesUtil.loadAnimation(animationPath + "Idle").then((animationClip: AnimationClip) => {
    //                 // 添加动画
    //                 roleCard.getComponent(Animation).addClip(animationClip);
    //                 // 设置默认动画
    //                 roleCard.getComponent(Animation).getComponent(Animation).defaultClip = animationClip;
    //                 roleCard.getComponent(Animation).play();
    //             });
    //         })
    //         resolve(-1);
    //     }).then(() => {
    //         this.rolesNode.getComponent(Layout).updateLayout();
    //     })
    // }
    initRoles() {
        //
        this._isClisk = true;
        // 获取角色数据
        const roles = PlayerData;
        Object.keys(roles).forEach((key, index) => {
            const role = roles[key]; //角色信息
            // 创建节点,赋值
            const roleCard = Globals.getNode("RoleCard", this.rolesNode); // 创建节点
            const roleIntroduce = roleCard.getChildByName("Introduce")
            roleIntroduce.getChildByName("hp").getComponent(Label).string = `生命：${role.maxHp}`; // 设置血量
            roleIntroduce.getChildByName("attack").getComponent(Label).string = `攻击：${role.attack}`; // 设置血量
            roleIntroduce.getChildByName("speed").getComponent(Label).string = `速度：${role.speed}`; // 设置血量
            roleIntroduce.getChildByName("attackSpeed").getComponent(Label).string = `攻速：${(1 - role.attackSpeed) * 10}`; // 设置血量
            roleCard.getChildByName("Name").getComponent(Label).string = role.name; // 设置名字
            // 设置对应的动画
            const animationPath = `Player/role${key}/`;
            ResourcesUtil.loadAnimation(animationPath + "Idle").then((animationClip: AnimationClip) => {
                // 添加动画
                roleCard.getComponent(Animation).addClip(animationClip);
                // 设置默认动画
                roleCard.getComponent(Animation).getComponent(Animation).defaultClip = animationClip;
                roleCard.getComponent(Animation).play(animationClip.name);
            });
        })

    }

    // 切换按钮回调函数
    onClickBtn(event: Event, eventData: string) {
        if (this._isClisk) {
            return;
        }
        // 避免重复点击
        this._isClisk = true;
        this.moveToCurrNum(eventData);

    }

    // 移动到下标的位置
    moveToCurrNum(dir: string) {
        const rolesArray = this.rolesNode.children; //角色容器 // 各个角色之间的偏移量
        const currChildren = this.rolesNode.children[0].getPosition();
        const nextChildren = this.rolesNode.children[1].getPosition();
        let offset = nextChildren.x - currChildren.x;
        if (dir == "right") {
            // 偏移量(右移动，这个为负数)
            offset = -offset
            // 改变当前角色this._currNum
            if (++RoleSelectionPanel.currNum >= rolesArray.length) {
                // 如果到达边界
                RoleSelectionPanel.currNum = 0 //当前角色下标就为0
                offset = -offset * (rolesArray.length - 1); //移动距离到第一个的距离
            }
        } else if (dir == "left") {
            // 改变当前角色RoleSelectionPanel.currNum
            if (--RoleSelectionPanel.currNum < 0) {
                // 如果到达边界
                RoleSelectionPanel.currNum = rolesArray.length - 1 //当前角色下标就为最后一个
                offset = -offset * (rolesArray.length - 1); //移动距离到最后一个的距离
            }
        }

        // 移动
        this.move(rolesArray, offset);
    }

    // 实际移动函数
    move(rolesArray: Node[], offset: number) {
        log("移动距离", offset);
        const rolesPos = this.rolesNode.getPosition();
        rolesPos.x = rolesPos.x + offset;
        tween(this.rolesNode)
            .to(.3, { position: rolesPos }, {
                easing: "sineOut"
            })
            .call(() => {
                this._isClisk = false;
                // 当前人物高亮显示
                this.currHighlight(rolesArray);
            })
            .start();
    }

    // 选中的人物显示，其他人物模糊显示.已经播放动画
    currHighlight(rolesArray: Node[]) {
        for (let i = 0; i < rolesArray.length; i++) {
            if (i === RoleSelectionPanel.currNum) {
                rolesArray[i].getComponent(UIOpacity).opacity = 255;
                // 播放动画
                rolesArray[i].getComponent(Animation).getComponent(Animation).play();
            } else {
                rolesArray[i].getComponent(UIOpacity).opacity = 150;
                rolesArray[i].getComponent(Animation).getComponent(Animation).stop();

            }
        }
    }
}


